import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
//引入基础样式
import "@/assets/css/base.css";
import "@/assets/css/el-reset.css";
// 引入侧边栏菜单插件
import SubMenu from "qf-sub-menu";
//引入进度条
import nprogress from "nprogress";
//引入进度条css文件
import "nprogress/nprogress.css";

Vue.use(ElementUI);
//使用Vue.use()将组件注入到所有的子组件
Vue.use(SubMenu);
Vue.config.productionTip = false;
//全局前置钩子（路由守卫）
router.beforeEach((to, from, next) => {
  nprogress.start();
  //to and from are Route Object,next() must be called to resolve the hook}
  //判断本地存储中是否有token
  //除了登录页以外，其他所有的页面，在没有登录的情况下都不给用户访问
  //如果有就放行，如果没有就不通过，重新跳转到登录页
  // console.log(to);
  let token = localStorage.getItem("qf-token" || "");
  if (token) {
    //已登录
    // 获取用户菜单
    // store中sidemenu是否为空，如果是空，则获取用户菜单
    if (store.state.sideMenu.length === 0) {
      // console.log(store.dispatch("GET_MENULIST"));
      store
        .dispatch("GET_MENULIST") //因为action函数加了async 所以他是个promise<pendding>
        .then(() => {
          next({ path: to.path }); //这里要注意, 如果直接next，那么那个时候的动态路由还没有生成，我们需要废掉前一个路由，再跳转一次，确保addRoutes生效了
        });
    } else {
      next();
    }
  } else {
    //未登录
    //判断是不是访问的登录页
    if (to.path !== "/login") {
      //跳转到登录页
      next({ path: "/login" });
    } else {
      next();
    }
  }
});

// 自定义鉴权指令
Vue.directive("has",{
  inserted(el,binding){
    // console.log(el);
    // console.log(binding);
    // 从本地取出用户的按钮权限
    let permission = localStorage.getItem("permissionButtons") || '[]'
    permission = JSON.parse(permission);

    // console.log(permission);
    // 看permission中是否包含传入的value对应字段
    // 如果包含说明具备该权限，不包含，则需禁用不包含的按钮
    if(!permission.includes(binding.value)){
      // 先保存按钮原来的类名
      let ELclassName = el.className;
      el.className = ELclassName + " "+"is-disabled"
      // 禁用按钮
      el.disabled = true
    }
  }
})

router.afterEach((to, from) => {
  //全局后置钩子
  nprogress.done();
  // console.log(to);
  // console.log(from);
  let matched = [...to.matched]; //浅拷贝到一个新的数组
  matched.splice(0, 1);
  // console.log(matched);
  //调用commit触发mutation 更改vuex中存储的breadCrumb

  store.commit("SET_BREADCRUMB", matched);
});

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
